<template>
  <div class="style-filter-setting-modal">
    <Alert show-icon>配置完成之后，请记得保存页面。</Alert>
    <div class="form-wrap">
      <Form :label-width="70">
        <FormItem label="启用滤镜">
          <i-switch v-model="styleFilter_use">
            <span slot="open"></span>
            <span slot="close"></span>
          </i-switch>
        </FormItem>
        <FormItem label="色相">
          <Slider v-model="styleFilter_hueRotate" :max="360" :min="0" show-input></Slider>
          <span class="reminder">色相：[0, 360]</span>
        </FormItem>
        <FormItem label="对比度">
          <Slider v-model="styleFilter_contrast" :max="200" :min="0" show-input></Slider>
          <span class="reminder">对比度：[0, 200]</span>
        </FormItem>
        <FormItem label="不透明度">
          <Slider v-model="styleFilter_opacity" :max="100" :min="0" show-input></Slider>
          <span class="reminder">不透明度：[0, 100]</span>
        </FormItem>
        <FormItem label="饱和度">
          <Slider v-model="styleFilter_saturate" :max="200" :min="0" show-input></Slider>
          <span class="reminder">饱和度：[0, 200]</span>
        </FormItem>
        <FormItem label="亮度">
          <Slider v-model="styleFilter_brightness" :max="200" :min="0" show-input></Slider>
          <span class="reminder">亮度：[0, 200]</span>
        </FormItem>
        <FormItem>
          <Button class="m-r-5px" size="small" type="primary" :style="{marginTop: '20px'}" @click="resetDefault">恢复默认</Button>
          <Button v-if="styleFilter_use == undefined" size="small"
                  type="default" :style="{marginTop: '20px'}" @click="buildStyleFilter">构建滤镜对象</Button>
        </FormItem>
      </Form>
    </div>
  </div>
</template>

<script>
  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getField',
    mutationType: 'designer/updateField',
  });

  export default {
    name: 'StyleFilterSettingModal',
    props: {

    },
    data() {
      return {

      }
    },
    mounted() {

    },
    methods: {
      resetDefault () {
        let layoutConfigData = this.$PnUtil.deepClone(this.layout.layoutConfigData);
        layoutConfigData.styleFilter_hueRotate = 0;
        layoutConfigData.styleFilter_contrast = 100;
        layoutConfigData.styleFilter_opacity = 100;
        layoutConfigData.styleFilter_saturate = 100;
        layoutConfigData.styleFilter_brightness = 100;
        this.$store.commit('designer/setLayoutConfigData', layoutConfigData)
      },

      buildStyleFilter () {
        let layoutConfigData = this.$PnUtil.deepClone(this.layout.layoutConfigData);
        layoutConfigData.styleFilter_use = false;
        layoutConfigData.styleFilter_hueRotate = 0;
        layoutConfigData.styleFilter_contrast = 100;
        layoutConfigData.styleFilter_opacity = 100;
        layoutConfigData.styleFilter_saturate = 100;
        layoutConfigData.styleFilter_brightness = 100;
        this.$store.commit('designer/setLayoutConfigData', layoutConfigData)
      }
    },
    computed: {
      ...mapFields({

        layout: 'pageMetadata.layout',
        styleFilter_use: 'pageMetadata.layout.layoutConfigData.styleFilter_use',
        styleFilter_hueRotate: 'pageMetadata.layout.layoutConfigData.styleFilter_hueRotate',
        styleFilter_contrast: 'pageMetadata.layout.layoutConfigData.styleFilter_contrast',
        styleFilter_opacity: 'pageMetadata.layout.layoutConfigData.styleFilter_opacity',
        styleFilter_saturate: 'pageMetadata.layout.layoutConfigData.styleFilter_saturate',
        styleFilter_brightness: 'pageMetadata.layout.layoutConfigData.styleFilter_brightness',

      })
    },
    watch: {

    }
  }
</script>

<style scoped>
  .style-filter-setting-modal {
    width: 350px;
    height: 320px;
    padding-top: 10px;
  }
  .style-filter-setting-modal .form-wrap {
    width: 100%;
    height: auto;
  }
  .ivu-form-item {
    margin-bottom: 0px;
  }
  .reminder {
    position: absolute;
    top: 5px;
    color: #bdbdbd;
    font-size: 12px;
  }
</style>
